<template>
    <view v-if="!state.goodEmptyVisible">
        <view class="mainimg">
            <view class="square">
                <img class="tabimg" :src="state.detail?.goodsImg || defaultImg" :lazy-load="true" />
            </view>
        </view>
        <view class="title">
            <view class="title_left">
                <view class="goods_info">
                    <text class="goods_info_name">{{ state.detail.goodsName }}</text>
                    <view class="goods_money">
                        <view v-if="state.detail.money">
                            <text> {{ priceNum(state.detail.money, 0) }}</text>
                            <text class="price-dian" v-if="priceNum(state.detail.money, 1)">
                                .{{ priceNum(state.detail.money, 1) }}
                            </text>
                            <text class="goods-dooler">元</text>
                            <text class="goods-dooler" style="margin: 0 7rpx">+</text>
                        </view>
                        <view>
                            <text>{{ floatDivide(state.detail.points, 100) }}</text>
                            <text class="goods-dooler">积分</text></view
                        >
                    </view>
                </view>
            </view>
        </view>
        <view class="notice">
            <view class="detail_list">
                <view class="detail_line">
                    <text class="detail_text">兑换限制</text
                    ><view class="detail_value activity">{{
                        state.detail.perOrderLimit ? `每单可兑换${state.detail.perOrderLimit}次` : '不限制'
                    }}</view>
                </view>
            </view>
        </view>
    </view>
    <uni-popup ref="popup" @change="changesku" :safe-area="false">
        <view class="popup-content">
            <view class="pop_cancel" @click.stop="popCancel">
                <view class="pop_num">选择数量</view>
                <img class="pop_logo" :src="getImgOssUrl('/ui-prod-2.0.0/cancel_1.1.png')" />
            </view>
            <view class="popcontent">
                <view class="popcontent_stepcount">
                    <div class="popcontent_stepcount_left pop_title">
                        <text>{{ '兑换数量' }}</text>
                    </div>
                    <div class="popcontent_stepcount_right">
                        <view class="popcontent_stepcount_right_desc">{{ getPurchaseLimit() }}</view>
                        <!-- 优惠券 -->
                        <view v-if="state.detail.goodsType == 2">
                            <!-- 每单兑换数量限制并且数量小于等于总库存(增加到每单允许兑换数量最大值,置灰) -->
                            <view
                                v-if="
                                    state.detail.perOrderLimit &&
                                    state.detail.perOrderLimit <= Number(state.detail.stock)
                                ">
                                <ShopingGoodsSteps
                                    @AddShoppingList="AddShoppingList($event, 1)"
                                    :num="state.quantity"
                                    :maxQuantity="Number(state.detail.perOrderLimit)" />
                            </view>
                            <!-- 每单兑换数量限制并且数量大于等于总库存或者每单数量不限制(增加到库存数量最大值,置灰) -->
                            <view v-else>
                                <ShopingGoodsSteps
                                    @AddShoppingList="AddShoppingList($event, 2)"
                                    :num="state.quantity"
                                    :maxQuantity="Number(state.detail.stock)" />
                            </view>
                        </view>
                        <!-- 抽奖 -->
                        <view v-else>
                            <!-- 总数量不限制 -->
                            <view v-if="state.detail?.pointsConfig?.limitConfig?.totalUnlimit == 1">
                                <!-- 每单兑换数量限制 -->
                                <ShopingGoodsSteps
                                    v-if="state.detail.perOrderLimit"
                                    @AddShoppingList="AddShoppingList($event, 1)"
                                    :num="state.quantity"
                                    :maxQuantity="Number(state.detail.perOrderLimit)" />
                                <!-- 每单兑换数量不限制 -->
                                <ShopingGoodsSteps
                                    v-if="!state.detail.perOrderLimit"
                                    @AddShoppingList="AddShoppingList($event, 4)"
                                    :num="state.quantity"
                                    :islimit="false" />
                            </view>
                            <!-- 总数量限制 -->
                            <view v-if="state.detail?.pointsConfig?.limitConfig?.totalUnlimit == 0">
                                <!-- 每单兑换数量限制(总总数量大于等于每单允许兑换数量) -->
                                <ShopingGoodsSteps
                                    v-if="
                                        state.detail.perOrderLimit &&
                                        state.detail.perOrderLimit <=
                                            state.detail?.pointsConfig?.limitConfig?.totalExchange
                                    "
                                    @AddShoppingList="AddShoppingList($event, 1)"
                                    :num="state.quantity"
                                    :maxQuantity="Number(state.detail.perOrderLimit)" />
                                <!-- 每单兑换数量限制(总总数量小于每单允许兑换数量) -->
                                <ShopingGoodsSteps
                                    v-if="
                                        state.detail.perOrderLimit &&
                                        state.detail.perOrderLimit >
                                            state.detail?.pointsConfig?.limitConfig?.totalExchange
                                    "
                                    @AddShoppingList="AddShoppingList($event, 3)"
                                    :num="state.quantity"
                                    :maxQuantity="Number(state.detail?.pointsConfig?.limitConfig?.totalExchange)" />
                                <!-- 每单兑换数量不限制 -->
                                <ShopingGoodsSteps
                                    v-if="!state.detail.perOrderLimit"
                                    @AddShoppingList="AddShoppingList($event, 3)"
                                    :num="state.quantity"
                                    :maxQuantity="Number(state.detail?.pointsConfig?.limitConfig?.totalExchange)" />
                            </view>
                        </view>
                    </div>
                </view>
                <div class="fixed">
                    <view class="popcontent_pay">
                        <template v-if="state.detail.points * state.quantity <= state.points || !isToken">
                            <!-- 总数量不限制 -->
                            <template v-if="state.detail?.pointsConfig?.limitConfig?.totalUnlimit == 1">
                                <button
                                    @touchstart.stop="buyGoods"
                                    class="twobutton btn otherbth"
                                    v-if="
                                        !state.detail.perOrderLimit ||
                                        (state.detail.perOrderLimit && state.quantity <= state.detail.perOrderLimit)
                                    ">
                                    立即兑换
                                </button>
                                <button class="twobutton btn otherbth disabled" v-else>立即兑换</button>
                            </template>
                            <!-- 总数量限制 -->
                            <template v-if="state.detail?.pointsConfig?.limitConfig?.totalUnlimit == 0">
                                <button
                                    @touchstart.stop="buyGoods"
                                    class="twobutton btn otherbth"
                                    v-if="
                                        (!state.detail.perOrderLimit &&
                                            state.quantity <= state.detail?.pointsConfig?.limitConfig?.totalExchange) ||
                                        (state.detail.perOrderLimit &&
                                            state.detail?.pointsConfig?.limitConfig?.totalExchange <=
                                                state.detail.perOrderLimit &&
                                            state.quantity <= state.detail?.pointsConfig?.limitConfig?.totalExchange) ||
                                        (state.detail.perOrderLimit &&
                                            state.detail?.pointsConfig?.limitConfig?.totalExchange >
                                                state.detail.perOrderLimit &&
                                            state.quantity <= state.detail.perOrderLimit)
                                    ">
                                    立即兑换
                                </button>
                                <button class="twobutton btn otherbth disabled" v-else>立即兑换</button>
                            </template>
                        </template>
                        <button
                            class="twobutton btn otherbth disabled"
                            v-else-if="state.detail.points * state.quantity > state.points && isToken">
                            积分不足
                        </button>
                        <!-- state.quantity > state.detail.perOrderLimit && state.detail.perOrderLimit -->
                    </view>
                </div>
            </view>
        </view>
    </uni-popup>
    <Btngroup
        :data="state.detail"
        :cartCount="state.cartCount"
        :points="state.points"
        @openSkuDialog="openDialog"
        :isVirtualGoods="true" />
    <GoodEmpty v-if="state.goodEmptyVisible" :text="state.goodEmptyText" />
</template>
<script setup>
import { reactive, ref, inject, onMounted } from 'vue';
import router from '@/router';
import { onShow } from '@dcloudio/uni-app';
import GoodEmpty from '@/components/goodEmpty';
import { floatDivide, checkToken, getImgOssUrl } from '@/commons/utils';
import request from '@/request';
import Btngroup from './btngroup.vue';
import ShopingGoodsSteps from '@/components/shopingGoodsSteps';
const props = defineProps(['id', 'goodsType']);
const popup = ref();
let isToken = ref();
const state = reactive({
    cartCount: 0,
    points: 0,
    quantity: 1,
    isShow: false,
    detail: {},
    goodEmptyVisible: false,
    goodEmptyText: ''
});
onMounted(() => {
    /** 购物车左上角角标逻辑 */
    // checkToken() && getCartCount();
    // getMemberInfo();
    // getGoodsDetail();
});
onShow(async () => {
    /** 购物车左上角角标逻辑 */
    isToken.value = await checkToken();
    if (isToken.value) {
        getCartCount();
        getMemberInfo();
    }
    getGoodsDetail();
});
const getGoodsDetail = async () => {
    const { data } = await request('virtualDetail', { id: props.id });
    // Object.assign(state.detail, data);
    state.detail = data;
    if (state.detail.constructor === Object) {
        state.goodEmptyVisible = false;
        state.detail.perOrderLimit = state.detail.pointsConfig.limitConfig.value;
    } else {
        state.goodEmptyText = '商品不存在';
        uni.setNavigationBarTitle({ title: '商品不存在' });
        state.goodEmptyVisible = true;
    }
};

const AddShoppingList = (type, param) => {
    if (type == 1 && param == 1) {
        if (state.quantity == state.detail.perOrderLimit) {
            uni.showToast({
                title: `每单最多可兑换${state.detail.perOrderLimit}件~`,
                icon: 'none'
            });
        }
        if (state.quantity < state.detail.perOrderLimit) {
            state.quantity++;
        }
    }
    if (type == 1 && param == 2) {
        if (state.quantity == state.detail.stock) {
            uni.showToast({
                title: `库存不足~`,
                icon: 'none'
            });
        }
        if (state.quantity < state.detail.stock) {
            state.quantity++;
        }
    }
    if (type == 1 && param == 3) {
        if (state.quantity == state.detail.pointsConfig.limitConfig.totalExchange) {
            uni.showToast({
                title: `库存不足~`,
                icon: 'none'
            });
        }
        if (state.quantity < state.detail.pointsConfig.limitConfig.totalExchange) {
            state.quantity++;
        }
    }
    if (type == 1 && param == 4) {
        state.quantity++;
    }
    if (type == 2) {
        if (state.quantity > 1) {
            state.quantity--;
        }
    }
};

/* 获取会员信息 */
const getMemberInfo = async () => {
    try {
        const { data } = await request('memberInfo');
        state.points = data.availablePoints || 0;
    } catch (error) {
        uni.showToast({
            title: error.data.msg,
            icon: 'none',
            duration: 2000
        });
    }
};
// 打开弹框
const openDialog = async data => {
    popup.value.open('bottom');
    state.isShow = true;
};
const priceNum = (amount, index) => {
    let price = floatDivide(amount, 100);
    let list = [];
    try {
        list = price.toString().split('.');
    } catch (e) {
        list = [Number(price)];
    }
    return list[index];
};
// 获取购物车数量
const getCartCount = async () => {
    const res = await request('cartQuantityServ');
    state.cartCount = res.data.quantity;
};
const getPurchaseLimit = () => {
    if (state.detail.perOrderLimit) {
        return `每单最多兑换${state.detail.perOrderLimit}件`;
    } else {
        return '';
    }
};
const popCancel = () => {
    popup.value.close();
    state.isShow = false;
};
const buyGoods = async () => {
    // if (state.quantity > state.detail.perOrderLimit && state.detail.perOrderLimit) {
    //     uni.showToast({
    //         title: `每单最多可兑换${state.detail.perOrderLimit}件~`,
    //         icon: 'none'
    //     });
    // } else {
    router.push({
        path: '/pages-cart/confirm/virtual/index',
        query: {
            goodsId: props.id,
            quantity: state.quantity,
            goodsType: props.goodsType
        }
    });
    // }
};
// onMounted(() => {
//     getDetail();
// });
</script>
<style lang="scss" scoped>
.mainimg {
    background-color: #ffff;
    .square {
        height: 750rpx;
        .tabimg {
            height: 100%;
            width: 100%;
        }
    }
}
.title {
    padding: 32rpx;
    display: flex;
    justify-content: space-between;
    background: #fff;

    .title_left {
        display: flex;
        align-items: center;
        .goods_info {
            padding-right: 45px;
            font-size: 29rpx;
            font-weight: 500;
            color: #333333;
            line-height: 40rpx;
            word-break: break-all;
            .group_num {
                margin-top: 18rpx;
                font-size: 20rpx;
                font-weight: 400;
                color: #969696;
            }
            .goods_money {
                display: flex;
                align-items: center;
                margin-top: 22rpx;
                font-size: 36rpx;
                color: #fe292b;
                line-height: 50rpx;
                font-weight: 600;
                font-family: PingFangSC-Medium, PingFang SC;
                .price-dian {
                    font-size: 26rpx;
                    font-weight: 500;
                }
                .goods-dooler {
                    font-size: 22rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #fe292b;
                    line-height: 22rpx;
                    margin-left: 4rpx;
                }
            }
        }
    }

    .jifen {
        font-size: 30rpx;
        vertical-align: 2rpx;
    }
}
.notice {
    margin-top: 18rpx;
    padding: 28rpx;
    background-color: #ffff;

    .detail_list {
        display: flex;
        justify-content: space-between;
        .detail_line {
            display: flex;
        }
        .detail_text {
            flex-shrink: 0;
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 50rpx;
            padding-right: 60rpx;
        }
        .activity {
            display: flex;
            align-items: center;
        }
        .detail_value {
            font-size: 28rpx;
            font-weight: 400;
            color: #333333;
            line-height: 50rpx;
            word-break: break-all;
            .tag {
                padding: 4rpx;
                margin-right: 4rpx;
                background: #fe292b;
                border-radius: 4px;
                font-size: 22rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
                line-height: 22rpx;
            }
            .text {
                font-size: 29rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #fe292b;
            }
        }
    }
}
.pop_num {
    position: absolute;
    left: 0 !important;
    top: 0 !important;
    padding: 0 28rpx 28rpx 28rpx;
    font-size: 30rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
}
.pop_title {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
}
.popcontent {
    // padding-bottom: 60rpx;
    .scroll {
        max-height: 700rpx;
    }
    .fixed {
        padding-bottom: var(--safe-area-inset-bottom);
        .popcontent_pay {
            display: flex;
            justify-content: center;

            padding: 28rpx;

            background-color: #ffff;
            .btn {
                width: 50%;
                height: 80rpx;
                margin: 0;

                color: #ffffff;
                border: 2rpx solid linear-gradient(270deg, #ffbd28 0%, #ff9b28 100%);
                border-radius: 40rpx 0 0 40rpx;
                background: linear-gradient(270deg, #ffbd28 0%, #ff9b28 100%);

                font-size: 28rpx;
                font-weight: 500;
                line-height: 80rpx;
            }
            .twobutton {
                border-radius: 0rpx 40rpx 40rpx 0rpx;
                background: linear-gradient(270deg, #ff5356 0%, #fe292b 100%);
            }
            .otherbth {
                width: 100% !important;

                border-radius: 40rpx;
            }
            .disabled {
                color: #ffff !important;
                background: #cccccc !important;
            }
        }
    }
    .popcontent_top {
        display: flex;

        padding: 0 28rpx 28rpx 28rpx;

        border-bottom: 2rpx solid #f5f5f5;
    }
    .popcontent_stepcount {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 52rpx 0 80rpx 0;
        padding: 0 28rpx;
        .popcontent_stepcount_right {
            display: flex;
            align-items: center;
            .popcontent_stepcount_right_desc {
                margin-right: 24rpx;

                color: #999999;

                font-family: PingFangSC-Regular, PingFang SC;
                font-size: 26rpx;
                font-weight: 400;
            }
        }
    }
}
</style>
